<template>
  <div class="component-name">
    底部(一般组件)
    <button @click="sendName">自定义事件</button> <!--自定义事件-->
    <button @click="unbind">解绑自定义事件</button> <!--解绑自定义事件-->
    <button @click="handleCheck(todo.id)">全局事件总线</button> <!--全局事件总线-->
    <button @click="sendMsg">发送(消息订阅与发布)</button> <!--消息订阅与发布-->
    <div class=category>
      <slot>默认值</slot> <!--默认插槽(没有就显示默认值)-->
      <slot name="footer">默认值</slot> <!--具名插槽(名称)-->
      <slot :games="games">默认值</slot> <!--作用域插槽(子传父,可有名称)-->
    </div>
    <button @click="increment(n)">加</button> <!--vuex任意组件间传递-->
    <button @click="decrement(n)">减</button>
    <h1>和为:{{ $store.state.sum }}</h1> <!--1.读取state数据(可用计算属性替换)-->
    <h1>加工为:{{ $store.getters.bigSum }}</h1> <!--读取getters数据(可用计算属性替换)-->
    简化:{{ sum }} {{ bigSum }}
    <button @click="JIA(n)">加2</button> <!--vuex任意组件间传递-->
    <button @click="JIAN(n)">减2</button>
    <button @click="jia(n)">加3</button> <!--vuex任意组件间传递-->
    <button @click="jian(n)">减3</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' //借助mapState或mapGetters生成计算属性(从state或getters中数据)，借助mapMutations或mapActions生成对应方法
import pubsub from 'pubsub-js' //引入pubsub对象
export default {
  name: 'component-name',
  components: { //注册组件

  },
  props: { //props传递数据

  },
  data() {
    return { //数据
      name: 'lisi',
      todo: { id: 10 },
      games: ['cf', '王者'],
      n: 2
    }
  },
  computed: { //计算属性
    // sum() {
    //   return this.$store.state.sum
    // },
    // bigSum() {
    //   return this.$store.getters.bigSum  //2.读取getters数据(可用计算属性替换)
    // },
    // ...mapState({ sum: 'sum', school: 'school' }),  //3.借助mapState生成计算属性(es6解构,对象写法,从state中读取数据)
    ...mapState(['sum', 'school']), //数组写法
    // ...mapGetters({ bigSum: 'bigSum'}), //从getters中读取数据
    ...mapGetters(['bigSum']) //数组写法
  },
  watch: { //监听器

  },
  methods: { //方法
    sendName() {
      this.$emit('selfEvent', this.name)
    },
    unbind() {
      this.$off('selfEvent') //解绑1个
      this.$off(['selfEvent', 'selfEvent2']) //解绑多个
      this.$off() //解绑全部
      this.$destroy() //销毁Student组件实例vc,所有自定义事件失效
    },
    handleCheck(id) {
      this.$bus.$emit('checkTodo', id) //孙传爷
    },
    sendMsg() {
      pubsub.publish('msgName', 1) //发送者
    },
    nextTick() {
      this.$nextTick(function () { //当改变数据后要基于更新后的新DOM进行某些操作时要在nexTick所指定回调函数中执行，优于定时器不加时间立即到点(推入队列执行)
        //this.$refs.inputTitle.focus()
      })
    },
    // increment() {
    //   this.$store.dispatch('jia', this.n) //调actions->再commit(mutations)
    //   //this.$store.commit('JIA', this.n) //直接调commit(mutations)
    // },
    // decrement() {
    //   //this.$store.dispatch('jian', this.n) //调actions->再commit(mutations)
    //   this.$store.commit('JIAN', this.n) //直接调commit(mutations)
    // },
    ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }), //借助mapMutations生成对应方法(对象写法,调commit联系mutations)
    // ...mapMutations(['JIA', 'JIAN']), //数组写法(调commit联系mutations)
    // ...mapActions({ increment: 'jia', decrement: 'jian' }), //调dispatch联系actions
    ...mapActions(['jia', 'jian']) //数组写法(调dispatch联系actions)
  },
  mounted() { //挂载完成(生命周期,钩子函数)
    const x = mapState({ sum: 'sum', school: 'school' })
    console.log(x)
  },
  beforeDestroy() { //将要销毁(生命周期,钩子函数)

  }
}
</script>

<style lang="less" scoped>
.component-name {}
</style>